import React, { useState } from 'react'
import ReactEcharts from "echarts-for-react"
import MyReactEcharts from '../../../components/MyReactEcharts';

export default function Salary() {
  const getOption = () => {
    return {
      title:{
        text:"图表统计",
        link:"http://www.woniuxy.com",
        textStyle:{
          color:"pink"
        }
      },
      legend:{
        data:["销售","流量"]
      },
      tooltip:{
        trigger:"axis"
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          // saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine:{
          lineStyle:{
            color:"blue",
            width: 5
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name:"销售",
          color:["red","tomato","pink"],
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        },
        {
          name:"流量",
          data: [10, 20, 324, 28, 35, 347, 160],
          type: 'bar'
        }
      ]
    };
  }
  return (
    <div>
      <ReactEcharts
        option={getOption()}
        style={{ height: "350px", width: "50%" }}
        className="react_for_echarts"
      ></ReactEcharts>
      <MyReactEcharts></MyReactEcharts>
    </div>
  )
}
